<template>
  <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" @opened="opened"
    @closed="closeDialog" top="0" width="1200px">
    <div v-if="videoUrlList.length > 0">
      <el-row>
        <el-col :span="12" v-for="(item, index) in videoUrlList" :key="index">
          <div class="video-board-box" :style="{
            height: 380 + 'px',
            paddingLeft: 20 + 'px',
            paddingRight: 20 + 'px',
            paddingBottom: 30 + 'px',
          }">
            <cstor-live-player :style="{ height: 380 - 50 + 'px' }" :src="item.url" />
            <div style="text-align: center; margin: 5px auto; cursor: pointer">
              <span style="font-size: 18px" class="el-tag" @click="openChannel(index)">
                视频{{ index + 1 }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import CstorLivePlayer from "@/views/components/cstor-live-player/cstor-live-player.vue";

import "cstor-live-player/dist/cstor-live-player.css";

import {
  carVideo,
  carVideoClose,
  carVideoRecord,
  carVideoSave,
} from "@/api/lsd/lsd";

export default {
  name: "video-board",
  props: {
    visible: {
      required: true,
      default: false,
    },
    tracePoint: {
      type: Object,
      default: null,
    },
  },
  components: {
    CstorLivePlayer,
  },
  data() {
    return {
      isCollapsed: false,
      playerOptions: {
        source: "",
        videoHeight: "1000px",
        videoWidth: "800px",
      },
      videoUrlList: [{ url: "" }, { url: "" }, { url: "" }, { url: "" }],
      player: null,
      channel: 1,
      title: "",
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    opened() {
      this.title = this.tracePoint.name + "-摄像头";
      this.videoUrlList = [{ url: "" }, { url: "" }, { url: "" }, { url: "" }];
    },
    openChannel(index) {

      if (this.videoUrlList[index].url) {
        this.$modal.msgError("该通道已打开");
        return;
      }
      carVideo({
        simCard: this.tracePoint.devicePhoneNum,
        channel: index + 1,
      }).then((res) => {
        if (res.code == 200) {
          this.videoUrlList[index].url = res.msg;
        }
      });
    },
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.videoUrlList.forEach((v, index) => {
        if (v.url) {
          carVideoClose({
            simCard: this.tracePoint.devicePhoneNum,
            channel: index + 1,
          }).then((res) => {
            if (res.code == 200) {
            }
          });
        }
      });
      this.videoUrlList = [];
      this.show = false;
    },

    played() {
      console.log("play callback");
    },
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.video-board-box {
  margin-bottom: 8px;
  padding: 5px 10px;

  .flex {
    display: flex;
  }

  .title {
    padding: 10px 5px 5px;
    background: rgba(18, 39, 27, 0.5);
  }

  .content {
    padding: 5px 10px;
  }
}
</style>
